<template>
	<view>
		<view class="section">
			<view class="list" :class="{hide:item.data.type =='info'}" v-for="item in (id==3?lists[currentTab]:list)" :key="index" v-if="id==3&&lists[currentTab].length>0||list.length>0"
			 @click="toTopic" :data-type="item.data.feed.video?true:false" :data-to="item.data.type" 
			 :data-id="item.data.topic.id || item.data.feed.id || item.data.type.type_id || item.data.info.id||item.id"
			 :data-user="item.data.sender" :data-commentId="item.data.comment.id">
				<view class="top">
					<view class="user">
						<view class="userImg">
							<avatar class="avatar" :user="id==3&&currentTab==1?item.user:item.data.sender" :size="true"></avatar>
						</view>
						<view class="info">
							<view class="title text-cut">
								<text>{{id==3 && currentTab==1 ? item.user.name : item.data.sender.name}}</text>
								<text v-if="id==1">打赏了你的{{item.data.topic?'圈子':'动态'}}</text>
								<text v-else-if="id==2">{{item.data.reply_comment?'赞了你的评论':'赞了你的动态'}}</text>
								<text v-else-if="id==3&&currentTab==0 ">{{item.data.reply_comment?'回复了你的评论':'评论了你的动态'}}</text>
								<text v-else-if="id==3&&currentTab==1 ">回答了你的问题</text>
								<view class="time">{{item.created_at && fromNow(item.created_at)}}</view>
							</view>
						</view>
					</view>
					<view class="contentBox">
						<view class="imgBox" v-if="item.data.topic.logo.url || item.data.feed.images.length>0||item.images.length>0||item.data.feed.video.cover || item.data.image.url">
							<image :src="item.data.feed.video.cover.url || item.data.topic.logo.url || item.data.feed.images[0].url ||item.images[0].url || item.data.image.urlurl"
							 mode="aspectFill" />
						</view>
						<view class="textBox" v-else>
							<view class="text">
								{{item.data.feed.content||item.feed_content}}
							</view>
						</view>
					</view>
				</view>
				<view class="infoContent" v-if="id==1">
					<view class="imgBox">
						<image :src="item.data.log.icon.url" mode="aspectFill" />
					</view>
					<text class="rewardName">{{item.data.log.name}}</text>
					<text class="number">x {{item.data.log.numbers}}</text>
				</view>
				<view class="infoContent" v-else>
					<view class="infoBody text-cut" v-if="id==3">{{item.data.comment.body}}</view>
					<view class="commentBox" v-if="item.data.reply_comment">{{item.data.reply_comment}}</view>
				</view>
			</view>

		</view>
		<view class="hasNoList" v-if="noList">还没有{{id==1?'打赏':id==2?'点赞':'评论'}}哦</view>
	</view>

	<!-- <wxs module="filter" src="../../../wxs/filter.wxs"></wxs> -->

</template>

<script>
	import {
		$storage
	} from '@/utils'
	import avatar from "../components/avatar/avatar.vue"
	export default {
		data() {
			return {
				list: [],
				noList: true,
				lists: [
					[]
				],
				id: 0,
				currentTab: 0,
				navData: [{
					isLastPage: false
				}, {
					isLastPage: false
				}],
				title: '',
				type: '',
				number: 0,
				page: 0,
				isLastPage: true,

			}
		},

		components: {
			avatar
		},
		created: function() {
			console.log('created')
		},
		mounted: function() {

		},
		onShow: function() {

		},
		onLoad: async function(query) {
			console.log(query)

			this.id = query.id;
			this.title = +query.id === 1 ? '打赏消息' : +query.id === 2 ? '点赞' : '评论';
			this.type = +query.id === 1 ? 'reward' : +query.id === 2 ? 'like' : 'comment';
			this.number = +query.number;
			uni.setNavigationBarTitle({
				title: +query.id === 2 ? '点赞' : '评论',
			})
			//消除小红点
			if (query.number > 0) {
				this.$u.api.removeUnreadTips(this.type).then( async () => {
					uni.$emit('after:notification');
				})
			}
			await this.getList();
		},
		async onPullDownRefresh() {
			this.navData = [{
				isLastPage: false
			}, {
				isLastPage: false
			}];
			this.lists = [
				[]
			];
			this.list = [];
			// this.isLode = 1;
			this.page = 1;
			await this.getList()
			wx.stopPullDownRefresh()
		},
		async onReachBottom() {
			if (+this.id === 3) {
				return this.getLists(true)
			}
			if (this.isLastPage) {
				return wx.showToast({
					title: '没有更多了',
					icon: 'none',
				})
			}
			wx.showLoading({
				title: '加载中'
			})
			const list = await this.$u.api.getUserNewsDetail({
				type: this.type,
				page: this.page
			})
			this.list = [...this.list, ...list.data];
			this.page = list.meta.current_page + 1;
			this.isLastPage = list.meta.current_page === list.meta.last_page
			wx.hideLoading()
		},
		methods: {
			async toTopic(e) {
				debugger
				if (e.currentTarget.dataset.type) {
					wx.navigateTo({
						url: `/feed/feed?id=${e.currentTarget.dataset.id}`
					})
				} else {
					if (+this.id == 1) {
						//预留给推送消息
						wx.navigateTo({
							url: `/pages/topic/detail/detail?topicId=${e.currentTarget.dataset.id}`
						})
					} else  {
						//赞和评论跳转

						if (e.currentTarget.dataset.to === 'feed') {
							wx.navigateTo({
								url: `/feed/feed?id=${e.currentTarget.dataset.id}`,
							})
						}
						if (e.currentTarget.dataset.to === 'info') {
							wx.navigateTo({
								url: `/feed/info?id=${e.currentTarget.dataset.id}`,
								// url: `/feed/info?id=21`,
							})
						}
						wx.navigateTo({
							url: `/feed/feed?id=${e.currentTarget.dataset.id}`,
						})
					
						
					}
				}
			},
			getDate(d) {
				return d ? new Date(d) : new Date()
			},
			/** 获取目标时间到当前时间的时间差 */
			fromNow(time) {
				let date
				// prettier-ignore
				// eslint-disable-next-line
				if (typeof time === 'string' && /\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(time)) {
					time = time.replace(/-/g, '/')
					date = this.getDate(time)
					const offset = getDate().getTimezoneOffset() * 60 * 1000
					date = this.getDate(+date - offset)
				} else {
					date = this.getDate(time)
				}
				const now = Date.now()
				const diff = (now - +date) / 1000
				let relative = diff

				if (relative < 60) {
					return '1分钟内'
				}
				relative = Math.floor(relative / 60)
				if (relative < 60) {
					return relative + '分钟前'
				}
				relative = Math.floor(relative / 60)
				if (relative < 24) {
					return relative + '小时前'
				}

				const timeString = date.toTimeString().substring(0, 5)
				relative = Math.floor(relative / 24)
				if (this.isYesterday(date)) {
					return '昨天 ' + timeString
				}
				if (relative < 9) {
					return relative + '天前'
				}
				return date.getMonth() + 1 + '-' + date.getDate()
			},
			/** 检测目标日前是否是今天 */
			isYesterday(target) {
				// prettier-ignore
				// eslint-disable-next-line
				if (typeof target === 'string' && /\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(target)) {
					target = target.replace(/-/g, '/')
				}
				const date = this.getDate()
				const today = +this.getDate(date.getFullYear(), date.getMonth(), date.getDate()) // 今日凌晨
				const yesterday = +this.getDate(today - 1000 * 24 * 3600) // 昨日凌晨
				const now = +this.getDate(target)
				return now < today && now > yesterday
			},
			async getList() {
				if (+this.id === 3) {
					return this.getLists()
				}
				const list = await this.$u.api.getUserNewsDetail({
					type: this.type,
					page: this.page
				})
				this.list = list.data;
				this.noList = list.data.length === 0;
				this.page = list.meta.current_page + 1;
				this.isLastPage = list.meta.current_page === list.meta.last_page ||
					list.meta.current_page > list.meta.last_page
			},
			/** 如果是回答和评论 */
			async getLists(more = false) {
				// const {
				// 	data: {
				// 		currentTab: cur,
				// 		navData
				// 	},
				// } = this
				const cur = this.currentTab;
				const navData = this.navData;
				if (navData[cur].isLastPage) {
					return wx.showToast({
						title: '没有更多了',
						icon: 'none',
					})
				}
				await this.$u.api.getUserNewsDetail({
						type: this.type,
						page: this.page,
						limit: 10,
					})
					.then((res) => {
						console.log(res)
						const beforeData = this.lists[cur]
						this.navData[cur].isLastPage = res.meta.last_page === res.meta.current_page ||
							res.meta.last_page < res.meta.current_page;
						this.lists[cur] = more ? [...beforeData, ...res.data] : res.data;
						this.noList = this.lists.length === 0;
						this.page = res.meta.current_page + 1
					})
			},

		},
	}
</script>

<style lang="scss">
	@import '../var.scss';
	.hide{
		display: none !important;
	}
	.header {
		color: $title-color;
		font-size: 30rpx;
	}

	.container {
		height: calc(100% - 60rpx);
	}

	.swiper-tab {
		display: flex;
		justify-content: space-between;
		width: 100%;
		min-height: 88rpx;
		padding: 0 250rpx;
		color: $info-color;
		font-size: 28rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #fff;

		&.fixed-top {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 5;
			margin-top: 0;
			border-bottom: 1px solid #f6f6f6;
		}
	}

	.swiper-tab-item {
		width: 50%;
		font-size: 28rpx;

		&.active {
			color: $title-color;
		}
	}

	.section {
		.list {
			display: flex;
			flex-direction: column;
			// align-items: center;
			padding: 25rpx 24rpx;
			border-bottom: 1rpx solid #f6f6f6;

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.user {
					display: flex;
					align-items: center;
				}
			}

			.userImg {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				margin: 10rpx 0 0 0;
				border-radius: 50%;

				.avatar {
					width: 100%;
					height: 100%;
				}

				.authenticationBox {
					position: absolute;
					right: 0rpx;
					bottom: 3rpx;
					display: flex;
					align-items: center;
					width: 24rpx;
					height: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 0;
					}
				}
			}

			.info {
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				padding: 10rpx 23rpx 0rpx;
				max-width: 488rpx;

				.title {
					width: 100%;
					color: $title-color;
					font-size: 28rpx;

					text {
						margin-left: 9rpx;
						color: $decor-color;
					}
				}

				.infoContent {
					display: flex;
					flex: 1;
					flex-direction: column;

					.infoBody {
						width: 450rpx;
						color: #465564;
						font-size: 30rpx;
					}

					.imgBox {
						width: 32rpx;
						height: 29rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.rewardName {
						margin-left: 10rpx;
						color: #333333;
						font-size: 24rpx;
					}

					.number {
						margin-left: 20rpx;
						color: $primary-color;
						font-size: 28rpx;
					}

					.commentBox {
						padding: 20rpx;
						color: #8c96a5;
						background-color: #f4f4f6;
						font-size: 26rpx;
						border-radius: 10rpx;
					}
				}

				.time {
					width: 100%;
					margin-top: 10rpx;
					color: #b3b3b3;
					font-size: 22rpx;
				}
			}

			.infoContent {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding-left: 100rpx;
				margin-top: 20rpx;

				.infoBody {
					width: 450rpx;
					color: #465564;
					font-size: 30rpx;
					padding-bottom: 10rpx;
				}

				.imgBox {
					width: 32rpx;
					height: 29rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.rewardName {
					margin-left: 10rpx;
					color: #333333;
					font-size: 24rpx;
				}

				.number {
					margin-left: 20rpx;
					color: $primary-color;
					font-size: 28rpx;
				}

				.commentBox {
					padding: 20rpx;
					color: #8c96a5;
					background-color: #f4f4f6;
					font-size: 26rpx;
				}
			}

			.contentBox {
				width: 92rpx;
				height: 92rpx;
				overflow: hidden;
				border-radius: 10rpx;

				.imgBox {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.textBox {
					width: 100%;
					height: 100%;
					padding: 20rpx;
					color: #808080;
					font-size: 22rpx;
					line-height: 22rpx;
					background-color: #f2f2f2;

					.text {
						width: 100%;
						height: 100%;
						overflow: hidden;
					}
				}
			}
		}
	}

	.comment-input {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: $md $lg;
		background-color: $bgcolor-gray;

		.input-placeholder {
			display: flex;
			flex: auto;
			align-items: center;
			min-width: 0;
			height: 70rpx;
			margin-right: $xl;
			padding-left: $md;
			color: $decor-color;
			font-size: $font-size-small;
			background-color: $bgcolor-light;
			border-radius: 110rpx;
		}
	}

	.hasNoList {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.wendas {
		color: $title-color !important;
	}
</style>
